<template>
  <el-form ref="userForm" :model="userForm" label-width="100px">
    <el-form-item label="用户名">
      <el-input v-model="userForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="userForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios';

export default {  
  data() {  
    return {  
      userForm: {  
        username: '',  
        password: '',  

      },  
    };  
  },  
  methods: {  
    submitForm() {  
      // 检查用户名和密码是否为空  
      if (!this.userForm.username || !this.userForm.password) {  
        alert('用户名和密码不能为空');  
        return;  
      }  
      // 发送请求检查用户名是否已存在  
      axios.get(`/api/user/checkDuplicateUsername/${this.userForm.username}`) // 使用反引号  
        .then(response => {  
          if (response.data && response.data.exists) { // 假设后端返回 { exists: true } 表示用户名已存在  
            // 用户名已存在  
            alert('用户名已存在，请使用其他用户名');  
          } else {  
            axios.post('/api/user/add', this.userForm)  
              .then(response => {  
                this.$message.success('用户添加成功');  
              })  
              .catch(error => {  
                this.$message.error('用户添加失败');  
              });  
          }  
        })  
        .catch(error => {  
          console.error(error);  
          alert('发生错误，请重试');  
        });  
    },  
    resetForm() {  
      this.$refs.userForm.resetFields();  
    },  
  },  
};  
</script>